<template>
    <div class="withdrawal-box">
        <nav-bar :title="title" />
        <div class="content wx" v-if="type == 1">
            <div class="title">{{$route.query.inf?'修改':'添加'}}微信支付账户</div>
            <div class="item">
                <div class="tit">用户名</div>
                <div class="input">
                    <input type="text" v-model="wechat.accountName" placeholder="请输入用户名">
                </div>
            </div>
            <div class="item">
                <div class="tit">账号</div>
                <div class="input">
                    <input type="text" v-model="wechat.accountNo" placeholder="请输入账号">
                </div>
            </div>
            <div class="item">
                <div class="tit">添加收款二维码</div>
                <van-uploader v-model="fileList" multiple :after-read="afterRead" :max-count="1" />
            </div>
            <j-botton type="danger" class="loginBtn" :disabled="isLoading" :loading="isLoading" loadingText='保存中'
                @click.native="saveWithdrawal(1)">保存</j-botton>
        </div>
        <div class="content ali" v-if="type == 2">
            <div class="title">{{$route.query.inf?'修改':'添加'}}支付宝支付账户</div>
            <div class="item">
                <div class="tit">用户名</div>
                <div class="input">
                    <input type="text" v-model="alipay.accountName" placeholder="请输入用户名">
                </div>
            </div>
            <div class="item">
                <div class="tit">账号</div>
                <div class="input">
                    <input type="text" v-model="alipay.accountNo" placeholder="请输入账号">
                </div>
            </div>
            <div class="item">
                <div class="tit">添加收款二维码</div>
                <van-uploader v-model="fileList" multiple :after-read="afterRead" :max-count="1" />
            </div>
            <j-botton type="danger" class="loginBtn" :disabled="isLoading" :loading="isLoading" loadingText='保存中'
                @click.native="saveWithdrawal(2)">保存</j-botton>
        </div>
        <div class="content bank" v-if="type == 3">
            <div class="title">{{$route.query.inf?'修改':'添加'}}银行卡支付账户</div>
            <div class="item">
                <div class="tit">用户名</div>
                <div class="input">
                    <input type="text" v-model="CardForm.accountName" placeholder="请输入用户名">
                </div>
            </div>
            <div class="item">
                <div class="tit">银行卡号</div>
                <div class="input">
                    <input type="text" v-model="CardForm.accountNo" label="银行卡号" placeholder="请输入银行卡号">
                </div>
            </div>
            <div class="item">
                <div class="tit">开户银行</div>
                <div class="input">
                    <input type="text" v-model="CardForm.bankName" label="银行名称" placeholder="请输入开户银行">
                </div>
            </div>
            <div class="item">
                <div class="tit">支行银行</div>
                <div class="input">
                    <input type="text" v-model="CardForm.bankBranch" label="银行支行名称" placeholder="请输入开户支行银行">
                </div>
            </div>
            <j-botton type="danger" class="loginBtn" :disabled="isLoading" :loading="isLoading" loadingText='保存中'
                @click.native="saveWithdrawal(3)">保存</j-botton>
        </div>
        <div class="isDefault" @click="setDefault">
            <van-icon :name="is_default === 1?'checked':'circle'" />
            <div class="tit">是否设为默认</div>
        </div>

    </div>
</template>
<script>
import md5 from 'md5';
import {
  mapGetters
} from 'vuex';
export default {
  name: 'withdrawal',
  data() {
    return {
      title: '添加微信',
      type: 1, // 1，微信    2，支付宝    3， 银行卡
      fileFormData: null,
      mobileValue: '',
      active: 0,
      isLoading: false,
      fileList: [],
      wechat: {
        id: '',
        accountName: '',
        accountNo: '',
        accountImg: ''
      },
      alipay: {
        id: '',
        accountName: '',
        accountNo: '',
        accountImg: ''
      },
      CardForm: {
        id: '',
        accountName: '',
        accountNo: '',
        bankName: '',
        bankBranch: ''
        // Note: ''
      },
      setupId: null,
      is_default: 1,
      SettingsInfo: {}
    };
  },
  computed: {
    ...mapGetters([
      'settingInfo'
    ])
  },
  created() {
    let type = this.$route.query.type;
    let inf = this.$route.query.inf ? JSON.parse(this.$route.query.inf) : null;
    if (inf) {
      this.setupId = inf.id;
      // this.is_default = inf.is_default;
      if (type == 1) {
        this.title = '修改微信';
        this.wechat.id = inf.id;
        this.wechat.accountName = inf.account_name;
        this.wechat.accountNo = inf.account_no;
        this.wechat.isDefault = inf.is_default;
        // this.fileList[0] = inf.account_img;
        // this.$set(this, 'financeWaterList', res.data);
      } else if (type == 2) {
        this.alipay.id = inf.id;
        this.alipay.accountName = inf.account_name;
        this.alipay.accountNo = inf.account_no;
        this.title = '修改支付宝';
      } else if (type == 3) {
        this.title = '修改银行卡';
      }
    } else {
      if (type == 1) {
        this.title = '添加微信';
      } else if (type == 2) {
        this.title = '添加支付宝';
      } else if (type == 3) {
        this.title = '添加银行卡';
      }
    }
    this.type = type;
  },
  methods: {
    afterRead(data) {
      var fileFormData = new FormData();
      fileFormData.append('file', data.file);
      this.fileFormData = fileFormData;
    },
    saveWithdrawal(type) {
      let that = this;
      this.isLoading = true;
      var options = {
        type: Number(this.type),
        isDefault: this.is_default
      };
      options.id = Number(this.setupId) || '';
      if (type == 1 || type == 2) {
        if (this.fileList.length === 0) {
          this.$toast('添加收款二维码!');
          return;
        }
        options.accountName = this.type == 1 ? this.wechat.accountName : this.alipay.accountName;
        options.accountNo = this.type == 1 ? this.wechat.accountNo : this.alipay.accountNo;
        this.$API.global.fileUpload(this.fileFormData).then(res => {
          if (res.code === 0) {
            if (this.type == 1) {
              this.wechat.accountImg = res.data.src;
            } else if (this.type == 2) {
              this.alipay.accountImg = res.data.src;
            }
            // console.log(this.type);
            // this.$toast('上传成功');
            options.accountImg = this.type == 1 ? this.wechat.accountImg : this.alipay
              .accountImg;
            this.$API.user.settingsSave(options).then(res => {
              if (res.code === 0) {
                this.SettingsInfo = res.data || {};
                this.isLoading = false;
                this.$toast('保存成功');
                this.$store.dispatch('setSettingInfo');
                setTimeout(() => {
                  that.$router.go(-1);
                }, 1000);
              }
            });
          }
        });
      } else {
        options.accountName = this.CardForm.accountName;
        options.accountNo = this.CardForm.accountNo;
        options.bankName = this.CardForm.bankName;
        options.bankBranch = this.CardForm.bankBranch;
        this.$API.user.settingsSave(options).then(res => {
          if (res.code === 0) {
            this.SettingsInfo = res.data || {};
            this.isLoading = false;
            this.$toast('保存成功');
            this.$store.dispatch('setSettingInfo');
            setTimeout(() => {
              that.$router.go(-1);
            }, 1000);
          }
        });
      }
    },
    setDefault() {
      if (this.is_default === 1) {
        this.is_default = 0;
      } else {
        this.is_default = 1;
      }
    }
  }
};
</script>
<style lang="less" scoped>
    .isDefault {
        padding: 0 30px;
        height: 80px;
        display: flex;
        align-items: center;
        // justify-content: center;
        margin-top: 30px;

        .tit {
            margin-left: 10px;
            font-size: 26px;
            color: #E31D19;
        }

        .van-icon-circle {
            color: #999;
            font-size: 35px;
        }

        .van-icon-checked {
            font-size: 35px;
            color: #E31D19;
        }
    }

    .content {
        width: 100%;
        box-sizing: border-box;
        padding: 0 30px;

        .title {
            font-size: 30px;
            color: #333333;
            padding: 20px 0;
        }

        .item {
            margin-bottom: 50px;

            .tit {
                font-size: 30px;
                color: #999999;
                height: 60px;
                line-height: 60px;
            }

            .input {
                margin-top: 10px;
                width: 100%;
                border-bottom: 1px solid #aaaaaa;
                display: flex;
                align-items: center;
                padding-bottom: 10px;
                font-size: 30px;

                input {
                    flex: 1;
                    background: none;
                }
            }
        }

        /deep/ .van-uploader {
            width: 200px;
            height: 200px;
            margin-top: 20px;

            .van-uploader__preview-image {
                height: auto;
            }

            .van-uploader__upload {
                background: #f6f6f6;

            }

            .van-image__img {
                height: auto;
            }
        }

        .save {
            width: 100%;
            height: 86px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #999;
            border-radius: 10px;
            color: #ffffff;
            font-size: 32px;
            margin-top: 130px;
        }

        .save.active {
            background: #E31D19
        }
    }
</style>
